<template>
  <div class="box">
    <div class="box">
      <el-button type="primary" @click="handleAdd">添加变量</el-button>
    </div>
    <div class="box">
      <h3>变量列表</h3>
    </div>

    <div class="box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="varId"
          label="变量id"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="varName"
          label="变量名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="varType"
          label="变量类型"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="varBrief"
          label="变量说明"
          width="380"
        ></el-table-column>
        <el-table-column prop="createTime" label="发布时间"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-dialog :title="formTitle" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="变量名称" prop="varName" :label-width="formLabelWidth">
            <el-input v-model="form.varName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="变量类型" prop="varType" :label-width="formLabelWidth">
            <el-select v-model="form.varType" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            <!-- <el-input v-model="form.varType" autocomplete="off"></el-input> -->
          </el-form-item>
          <el-form-item label="变量说明" prop="varBrief" :label-width="formLabelWidth">
            <el-input v-model="form.varBrief" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitSave">保 存</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import {getTypeVarList,addTypeVar,setTypeVar,delTypeVar,getTypeList} from '@/api/news.js'
  export default {
    name: 'Vars',
    props: {
      typeId: { type: [String,Number], default: 0 },
    },
    data() {
      return {
        tableData: [],
        typeList: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        form: {
          varId: null,
          varName: null,
          varType: null,
          varBrief: null,
        },
        formTitle: '添加',
        rules: {
          varName: [{ required: true, message: '请输入变量名称', trigger: 'blur' }],
          varType: [{ required: true, message: '请输入变量类型', trigger: 'blur' }],
          varBrief: [{ required: true, message: '请输入变量说明', trigger: 'blur' }],
        },

      }
    },
    mounted() {
      console.log('mounted', this.typeId);
      this.loadList()
      this.loadTypeList()
    },
    methods: {
      resetForm() {
        this.form = {
          varId: null,
          varName: null,
          varType: null,
          varBrief: null,
        }
      },
      loadList() {
        let param = {}
        param.id = this.typeId
        getTypeVarList(param).then(res => {
          console.log('getTypeVarList', res)
          if(res.code == 200) {
            this.tableData = res.data
          }
        })
      },
      loadTypeList() {
        getTypeList().then(res => {
          if(res.code == 200) {
            this.typeList = res.data
          }
        })
      },
      handleAdd() {
        console.log('handleAdd')
        this.resetForm()
        this.formTitle = '添加变量'
        this.form.varId = null
        this.dialogFormVisible = true
      },
      handleEdit(index,row) {
        console.log('handleEdit')
        this.form = row
        this.formTitle = '编辑变量'
        this.dialogFormVisible = true
      },
      handleDelete(index,row) {
        console.log('handleDelete')
        if(confirm('删除后无法恢复，您确定？')){
          delTypeVar({id:row.varId}).then(res=>{
            if(res.code==200){
              this.$message.success('文章删除成功')
              this.loadList()
            }
          })
        }
      },
      submitSave() {
        console.log('submitSave')
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if(this.form.varId == null) {
              // 添加变量
              this.form.typeId = this.typeId
              addTypeVar(this.form).then(res => {
                if(res.code == 200) {
                  this.$message.success('添加成功')
                  this.dialogFormVisible = false
                  this.loadList()
                }
              })
            }
            else {
              // 修改变量
              setTypeVar(this.form).then(res => {
                if(res.code == 200) {
                  this.$message.success('修改成功')
                  this.dialogFormVisible = false
                  this.loadList()
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // this.dialogFormVisible = false
      }
    }
  }
</script>

<style scoped>
  .box {
    margin: 10px;
  }
</style>
